<template>
  <div class="reset-box">
    <DownHeader />
    <div class="content-wrap">
      <el-steps :active="currentStep">
        <el-step title="验证手机号"></el-step>
        <el-step title="设置密码"></el-step>
        <el-step title="设置成功"></el-step>
      </el-steps>
      <div class="steps-wrap">
        <template v-if="currentStep == 1">
          <div class="steps-item-wrap" :class="{ errorStatus: errorObj.phone }">
            <el-input
              v-model.trim="stepOneParams.phone"
              placeholder="请输入手机号"
              maxlength="11"
              @blur="validateHandle('phone', 'One')"
            ></el-input>
            <div class="error-label" v-if="errorObj.phone">
              请输入正确的手机号
            </div>
          </div>
          <div class="steps-item-wrap" :class="{ errorStatus: errorObj.code }">
            <el-input
              v-model="stepOneParams.code"
              placeholder="请输入验证码"
              @blur="validateHandle('code', 'One')"
            ></el-input>
            <div
              class="get-code-btn"
              :class="[
                { active: stepOneParams.phone && !errorObj.phone },
                { wait: isCountDownStatus },
              ]"
              @click="sendMessageHandle"
            >
              {{
                !isCountDownStatus ? "获取验证码" : `重新获取(${countdown}s)`
              }}
            </div>
            <div class="error-label" v-if="errorObj.code">请输入验证码</div>
          </div>
          <div class="steps-item-wrap next" @click="nextHandle(1)">
            <div class="next-btn" :class="[{ active: isSendMessage }]">
              下一步
            </div>
          </div>
        </template>
        <template v-if="currentStep == 2">
          <div class="steps-item-wrap" :class="{ errorStatus: errorObj.first }">
            <el-input
              v-model.trim="stepTwoParams.first"
              :type="firstType"
              placeholder="请输入新密码"
              @blur="checkFirstInput"
            ></el-input>
            <div
              class="show-btn-icon"
              :class="{ active: isShowfirst }"
              @click="changeStatusHandle(1)"
            ></div>
            <div class="error-label" v-if="errorObj.first">
              {{ checkFirstLabel }}
            </div>
          </div>
          <div
            class="steps-item-wrap"
            :class="{ errorStatus: errorObj.second }"
          >
            <el-input
              v-model.trim="stepTwoParams.second"
              :type="secondType"
              placeholder="请再次输入新密码"
              @blur="checkSecondInput"
            ></el-input>
            <div
              class="show-btn-icon"
              :class="{ active: isShowSecond }"
              @click="changeStatusHandle(2)"
            ></div>
            <div class="error-label" v-if="errorObj.second">
              {{ checkSecondLabel }}
            </div>
          </div>
          <div class="steps-item-wrap next" @click="nextHandle(2)">
            <div class="next-btn" :class="[{ active: checkNextStatus }]">
              下一步
            </div>
          </div>
        </template>
        <template v-if="currentStep == 3">
          <div class="success-wrap"></div>
          <div class="success-tips">密码修改成功!</div>
          <div class="success-back">{{ backDown }}s后自动返回登录页</div>
          <div class="steps-item-wrap next">
            <div class="next-btn active" @click="logoutHandle">返回登录</div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {
  sendMessage,
  checkMessage,
  changePassword,
} from "@/api/password/password";
import DownHeader from "@/components/login_header";
export default {
  name: "ResetBox",
  components: {
    DownHeader,
  },
  computed: {
    checkNextStatus() {
      return (
        this.stepTwoParams.first != "" &&
        this.stepTwoParams.second != "" &&
        !this.errorObj.first &&
        !this.errorObj.second
      );
    },
  },
  data: () => ({
    currentStep: 1,
    // 是否请求短信
    isSendMessage: false,
    stepOneParams: {
      phone: "",
      code: "",
    },
    stepTwoParams: {
      first: "",
      second: "",
    },
    errorObj: {
      phone: false,
      code: false,
      first: false,
      second: false,
    },
    countdown: 60,
    isCountDownStatus: false,
    firstType: "password",
    isShowfirst: false,
    secondType: "password",
    isShowSecond: false,
    checkFirstLabel: "请输入新密码",
    checkSecondLabel: "请再次输入新密码",
    backDown: 5,
    timer: null,
  }),
  methods: {
    resetParams() {
      this.currentStep = 1;
      this.isSendMessage = false;
      this.isCountDownStatus = false;
      this.countdown = 60;
      this.backDown = 5;
      this.stepOneParams.phone = "";
      this.stepOneParams.code = "";
      this.stepTwoParams.second = "";
      this.stepTwoParams.first = "";
      for (let k in this.errorObj) {
        this.errorObj[k] = false;
      }
      this.firstType = "password";
      this.secondType = "password";
      this.isShowfirst = false;
      this.isShowSecond = false;
    },
    // 修改密码
    changePassword(parmas) {
      this.$load.show();
      changePassword(parmas)
        .then((res) => {
          console.log(res, "852963");
          if (res.data.code != 200) return this.$message.error(res.data.msg);
          this.$message.success("设置成功");
          this.currentStep = 3;
          this.startBackDown();
        })
        .finally(() => {
          this.$load.close();
        });
    },
    // 校验手机号
    checkMessage(parmas) {
      this.$load.show();
      checkMessage(parmas)
        .then((res) => {
          console.log(res, "852963");
          if (res.data.code != 200) return this.$message.error(res.data.msg);
          this.currentStep = 2;
          if (this.timer) {
            clearInterval(this.timer);
          }
        })
        .finally(() => {
          this.$load.close();
        });
    },
    // 发送短信
    sendMessage(parmas) {
      this.$load.show();
      sendMessage(parmas)
        .then((res) => {
          if (res.data.code != 200)
            return this.$message.error("发送失败，请稍后再试！");
          this.$message.success("发送成功");
        })
        .finally(() => {
          this.$load.close();
        });
    },
    startBackDown() {
      if (this.timers) {
        clearInterval(this.timer);
        this.backDown = 5;
      }
      this.timers = setInterval(() => {
        if (this.backDown > 0) {
          this.backDown--;
        } else {
          clearInterval(this.timers);
          this.$router.go(-1);
          // this.resetParams();
        }
      }, 1000);
    },
    checkFirstInput() {
      if (!this.stepTwoParams.first) {
        this.checkFirstLabel = "请输入新密码";
        this.errorObj.first = true;
      } else if (
        this.stepTwoParams.first.length < 6 ||
        this.stepTwoParams.first.length > 8
      ) {
        this.checkFirstLabel = "密码长度为6~8个字符";
        this.errorObj.first = true;
      } else {
        this.errorObj.first = false;
      }
    },
    checkSecondInput() {
      if (!this.stepTwoParams.second) {
        this.checkSecondLabel = "请再次输入新密码";
        this.errorObj.second = true;
      } else if (
        this.stepTwoParams.second.length < 6 ||
        this.stepTwoParams.second.length > 8
      ) {
        this.checkSecondLabel = "密码长度为6~8个字符";
        this.errorObj.second = true;
      } else if (
        this.stepTwoParams.second != "" &&
        this.stepTwoParams.first != this.stepTwoParams.second
      ) {
        this.checkSecondLabel = "两次输入的密码不一致，请重新输入";
        this.errorObj.second = true;
      } else {
        this.errorObj.second = false;
      }
    },
    changeStatusHandle(type) {
      if (type == 1) {
        this.isShowfirst = !this.isShowfirst;
        this.firstType = !this.isShowfirst ? "password" : "text";
      } else {
        this.isShowSecond = !this.isShowSecond;
        this.secondType = !this.isShowSecond ? "password" : "text";
      }
    },
    nextHandle(type) {
      let str = "";
      let flag = true;
      if (type == 1) {
        str = "One";
      } else {
        str = "Two";
      }
      let tStr = `step${str}Params`;
      for (let k in this[tStr]) {
        if (this[tStr][k] == "") {
          flag = false;
        }
        if (this.errorObj[k] == true) {
          flag = false;
        }
      }
      console.log(this.errorObj);
      if (!flag) return;
      switch (type) {
        case 1: {
          let reParams = {
            phone: this.stepOneParams.phone,
            code: this.stepOneParams.code,
          };
          this.checkMessage(reParams);
          break;
        }
        case 2: {
          let cParams = {
            phone: this.stepOneParams.phone,
            code: this.stepOneParams.code,
            upPassword: this.stepTwoParams.first,
            downPassword: this.stepTwoParams.second,
          };
          this.changePassword(cParams);
          break;
        }
      }
    },
    startCountdown() {
      if (this.timer) {
        clearInterval(this.timer);
        this.countdown = 60;
      }
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.countdown = 60;
          this.isCountDownStatus = false;
        }
      }, 1000);
    },
    sendMessageHandle() {
      if (
        !this.stepOneParams.phone ||
        this.errorObj.phone ||
        this.isCountDownStatus
      )
        return;
      this.isSendMessage = true;
      this.isCountDownStatus = true;
      // let
      this.startCountdown();
      let params = {
        phone: this.stepOneParams.phone,
      };
      this.sendMessage(params);
    },
    validateHandle(type, index) {
      let str = `step${index}Params`;
      if (type == "phone") {
        const phoneRegex = /^1(3|4|5|6|7|8|9)\d{9}$/;
        this.errorObj.phone = !phoneRegex.test(this.stepOneParams.phone);
        return;
      }
      this.errorObj[type] = this[str][type] == "";
    },
    logoutHandle() {
      // this.resetParams();
      this.$router.go(-1);
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-input {
  flex: 1;
  width: 0;
  .el-input__inner {
    height: 46px;
    line-height: 46px;
    border: none;
    font-size: 16px;
  }
}
::v-deep.el-step {
  .el-step__icon {
    width: 40px;
    height: 40px;
    border: none;
    background-color: #f3f3f3;
    .el-step__icon-inner {
      color: rgba($color: #000000, $alpha: 0.4);
      font-weight: 500;
      font-size: 20px;
    }
  }
  .el-step__title {
    color: rgba($color: #000000, $alpha: 0.4);
    font-weight: 400;
    font-size: 16px;
  }
  .el-step__head {
    .el-step__line {
      background-color: #e7e7e7;
      margin-right: 12px !important;
      left: 52px;
      top: 20px;
    }
    &.is-finish {
      .el-step__icon {
        background-color: #0087d6;
      }
      .el-step__icon-inner {
        color: #ffffff;
      }
    }
  }
  .el-step__title.is-finish {
    color: rgba($color: #000000, $alpha: 0.9) !important;
  }
  .el-step__line-inner {
    border-color: #0087d6;
  }
  .el-step__main {
    margin-left: -13px;
  }
  &:first-child {
    .el-step__main {
      margin-left: -20px;
    }
  }
}
.content-wrap {
  padding: 168px 284px 0;
}
.steps-wrap {
  margin-top: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  .steps-item-wrap {
    position: relative;
    margin-bottom: 24px;
    align-items: center;
    display: flex;
    width: 412px;
    height: 48px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    .get-code-btn {
      height: 46px;
      width: 112px;
      line-height: 46px;
      transition: all 0.3s;
      text-align: center;
      color: rgba($color: #000000, $alpha: 0.4);
      font-weight: 400;
      font-size: 16px;
      border-radius: 0 4px 4px 0;
      background-color: #eeeeee;
      &.active {
        cursor: pointer;
        color: #ffffff;
        background-color: #0087d6;
      }
      &.wait {
        color: rgba($color: #000000, $alpha: 0.6);
        background-color: #eeeeee;
        width: 140px;
      }
    }
    .show-btn-icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
      margin-right: 16px;
      background-image: url("~@/assets/common/eye.png");
      background-size: contain;
      background-repeat: no-repeat;
      &.active {
        background-image: url("~@/assets/common/unview.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
    .error-label {
      position: absolute;
      font-size: 16px;
      line-height: 22px;
      font-weight: 400;
      color: #e34d59;
      bottom: -34px;
      left: 0;
    }
    .next-btn {
      flex: 1;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #eeeeee;
      color: rgba($color: #000000, $alpha: 0.4);
      font-weight: 500;
      font-size: 16px;
      border-radius: 4px;
      &.active {
        cursor: pointer;
        color: #ffffff;
        background-color: #0087d6;
      }
    }
    &.next {
      margin-top: 56px;
      border: none;
    }
  }
  .success-wrap {
    width: 120px;
    height: 120px;
    background-image: url("~@/assets/common/success_back_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
  .success-tips {
    color: rgba($color: #000000, $alpha: 0.9);
    font-weight: 500;
    font-size: 18px;
  }
  .success-back {
    margin-top: 8px;
    color: rgba($color: #000000, $alpha: 0.4);
    font-weight: 400;
    font-size: 14px;
  }
}
::v-deep.errorStatus {
  border: 1px solid #e34d59 !important;
  margin-bottom: 54px !important;
}
</style>
